@import "./variables.scss";
@import './mixin.scss';
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  color: #666666;
}
 .primary-c {
  color: $primary;
 }
 .c3 {
   color: #333
 }
 p { margin: 0; }

//  ::-webkit-scrollbar {
//   /*滚动条整体样式*/
//   width: 4px;
//   /*高宽分别对应横竖滚动条的尺寸*/
//   height: 10px;
//   display: block !important;
// }

// ::-webkit-scrollbar-thumb {
//   /*滚动条里面小方块*/
//   border-radius: 20px;
//   // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
//   // background: rgba(221, 224, 230, 1);
//   background: #dadbdd;
// }

// ::-webkit-scrollbar-track {
//   /*滚动条里面轨道*/
//   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
//   border-radius: 10px;
//   background: #ededed;
//   display: none;
// }

h1,h2,h3,h4,h5,h6 {
  margin: 0;
}

a:link,
a:visited,
a:hover,
.a:active {
  text-decoration: none;
  color: inherit;
}

.s-border-box { box-sizing: border-box; }

.s-d-block { display: block; }
.s-d-inline { display: inline; }
.s-d-inline-block { display: inline-block; }
.s-d-flex { display: flex; }
.s-d-inline-flex { display: inline-flex; }

.s-posr { position: relative; }
.s-posa { position: absolute; }
.s-posf { position: fixed; }

.s-jc-flex-start { display: flex; justify-content: flex-start; }
.s-jc-flex-end { display: flex; justify-content: flex-end; }
.s-jc-center { display: flex; justify-content: center; }
.s-jc-space-between { display: flex; justify-content: space-between; }
.s-jc-space-around { display: flex; justify-content: space-around; }

.s-ai-flex-start { display: flex; align-items: flex-start; }
.s-ai-flex-end { display: flex; align-items: flex-end; }
.s-ai-center { display: flex; align-items: center; }
.s-ai-baseline { display: flex; align-items: baseline; }
.s-ai-stretch { display: flex; align-items: stretch; }

.s-flex-center { display: flex; justify-content: center; align-items: center; }

.s-as-auto { align-self: auto; }
.s-as-flex-start { align-self: flex-start; }
.s-as-flex-end { align-self: flex-end; }
.s-as-center { align-self: center; }
.s-as-baseline { align-self: baseline; }
.s-as-stretch { align-self: stretch; }

.s-dr-row { display: flex; flex-direction: row; }
.s-dr-row-reverse { display: flex; flex-direction: row-reverse; }
.s-dr-column { display: flex; flex-direction: column; }
.s-dr-column-reverse { display: flex; flex-direction: column-reverse; }

.s-flex-wrap { display: flex; flex-wrap: wrap; }

.s-flex-auto { flex: auto };
.s-flex-none { flex: none };

.s-mla { margin-left: auto; }
.s-mra { margin-right: auto; }

.s-tac { text-align: center; }
.s-tal { text-align: left; } // 无快捷方式
.s-tar { text-align: right; }

.s-fwb { font-weight: bold; }
// .s-border-top { border-top: 1px solid @color-line-dark;}
// .s-border-bottom { border-bottom: 1px solid @color-line-dark;}

.s-pointer { cursor: pointer; user-select: none; }
.s-grab { cursor: grab; user-select: none; }
.s-not-allowed { cursor: not-allowed; }

.s-of-hidden { overflow: hidden; }
.s-of-auto { overflow: auto; }
.s-usn { user-select: none; }

$set1: 
  (fz, font-size),
  (lh, line-height),
  (w, width),
  (minw, min-width),
  (maxw, max-width),
  (h, height),
  (minh, min-height),
  (maxh, max-height),
  (m, margin),
  (p, padding),
  (pl, padding-left),
  (pr, padding-right),
  (pt, padding-top),
  (pb, padding-bottom),
  (br, border-radius);

  $set2:
    (l, left),
    (t, top),
    (b, bottom),
    (r, right),
    (w, width),
    (h, height);
  
  $set3:
    (z, z-index),; // 这里的逗号千万不能省略

  $set4:
    (l, left),
    (t, top),
    (b, bottom),
    (r, right),
    (ml, margin-left),
    (mr, margin-right),
    (mt, margin-top),
    (mb, margin-bottom);

  @for $value from -50 through 1000 {
    @each $k, $v in $set1{
      .#{$k}#{$value} {
        #{$v}: ($value * 1px) !important;
      }
    }
    @each $k, $v in $set3{
      .#{$k}#{$value} {
        #{$v}: ($value * 1) !important;
      }
    }
    .scale#{$value} {
      transform: scale(($value * 0.01), ($value * 0.01)) !important;
    }
    .shrink#{$value} {
      flex-shrink: $value * 0.01 !important;
    }
    .grow#{$value} {
      flex-grow: $value * 0.01 !important;
    }
  }

  @for $value from -1000 through 1000 {
    @each $k, $v in $set4{
      .#{$k}#{$value} {
        #{$v}: ($value * 1px) !important;
      }
    }
  }

  @for $value from -360 through 360 {
    .rotate#{$value} {
      transform: rotate($value * 1deg) !important;
    }
    .ts#{$value} {
      transition: all ($value * 0.01s) !important;
    }
  }

  @for $value from 0 through 100 {
    @each $k, $v in $set2{
      .#{$k}#{$value}p {
        #{$v}: ($value * 1%) !important;
      }
    }
    .br#{$value}p {
      border-radius: ($value * 1%) !important;
    }
    .blur#{$value} {
      filter:blur($value * 1px);
      -webkit-filter:blur($value * 1px);
      -moz-filter:blur($value * 1px);
      -ms-filter:blur($value * 1px);
      -o-filter:blur($value * 1px);
    }
  }
  
  @for $value from 0 through 10 {
    .eps#{$value} {
      @include ellipsis($value)
    }
  }

  @for $i from 0 through 30 {
    @for $j from 0 through 30 {
      .p#{$i}-#{$j} {
        padding: ($i * 1px) ($j * 1px);
      }
      .m#{$i}-#{$j} {
        margin: ($i * 1px) ($j * 1px);
      }
      .gap#{$i}-#{$j} {
        gap: ($i * 1px) ($j * 1px);
      }
    }
  }

  .eps01 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }